<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>align-self 的使用</title>
</head>

<body>
    <h1>现在看 结论是 grid布局的时候 justify-self 才好用</h1>
    <div class="box">
        <div class="item item1">
            我 左右 居中<br>
            justify-self: center;
        </div>
        <div class="item item2">
            我 左右 靠右<br>
            justify-self: end;
        </div>
        <div class="item item3">
            我 左右 靠左<br>
            justify-self: start;
        </div>
        <div class="item item4">4</div>
    </div>
    <hr>
    <div class="box2">
        <div class="left">
            left
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae maxime corporis dignissimos debitis, velit
            tempora. Porro ipsa ea delectus voluptatem ullam inventore quod ab et? In mollitia sit nam et. Lorem ipsum
            dolor sit, amet consectetur adipisicing elit. Pariatur ipsum tenetur id illum sequi accusamus magni cum,
            nemo reiciendis debitis fugiat consectetur, nostrum harum eligendi itaque? Molestiae vel nostrum enim.
        </div>
        <div class="right">
            right
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Soluta nemo incidunt enim, saepe, quo labore
            distinctio eveniet, minus exercitationem laborum nesciunt. Nobis culpa nisi delectus odit similique sequi
            pariatur. Reprehenderit a praesentium possimus qui vel maxime consectetur debitis, non eligendi suscipit
            soluta sed dolores cum, deleniti delectus tempore earum ab eius adipisci iste beatae. Expedita quaerat eos
            ab ipsam, corrupti consequatur nam hic nihil excepturi eveniet eligendi quibusdam eius voluptatum dolores id
            omnis minima impedit officia, odit perferendis, consectetur consequuntur? Perspiciatis incidunt temporibus
            est modi illum! Quasi, accusamus praesentium iure omnis laboriosam consequatur? Veniam voluptates aliquam
            porro eum animi sed inventore eos dignissimos quaerat necessitatibus perspiciatis nostrum eius ut ex alias
            velit commodi delectus, nobis ullam! Expedita officia non iste dolor. Possimus eligendi aut natus officiis
            ea fugit corporis at velit sed dignissimos, ad repellat odit quis inventore unde reiciendis modi debitis.
            Nemo saepe incidunt ex a. Libero repellat cumque voluptate numquam consectetur. Rem ipsum doloribus
            consequuntur unde quidem minus tempora nihil officia ipsa debitis. Distinctio iure est possimus deleniti
            delectus ea dignissimos veritatis laborum officia eum fugiat temporibus accusantium, dolorum magni aliquam,
            blanditiis quisquam veniam, quam ipsa consectetur necessitatibus totam! Qui temporibus excepturi aliquam
            officia velit, ipsa quisquam minima obcaecati quasi consectetur praesentium ab provident. Aperiam excepturi,
            rerum provident architecto quasi deserunt, minima numquam alias culpa veritatis consequatur sit, voluptatum
            quo qui nobis est corrupti! Ullam quae eos quasi similique impedit aliquam necessitatibus sapiente expedita
            voluptatum! Blanditiis, iure sed numquam maiores deserunt ducimus dolorem quasi architecto magni cupiditate
            rem perferendis possimus! Quisquam, vitae doloremque suscipit quae est iure, iusto sed commodi, hic
            temporibus rerum enim facere provident impedit recusandae vel! Quaerat dolorem odit quam inventore officiis
            ullam accusantium ipsam, non quisquam omnis modi dolores reiciendis repellat dolor porro, laudantium
            corrupti mollitia laboriosam quod hic cumque id nostrum pariatur praesentium. Illo omnis amet, aliquid
            voluptatibus nobis illum nostrum modi, ipsum nulla aspernatur iste quisquam odit, optio rem animi incidunt
            accusantium dolorum rerum quo quod! Dolore distinctio autem atque laudantium maiores nulla molestiae
            temporibus voluptate accusantium doloremque dolorem illo quae aliquid, velit sed! Fugiat corporis ad ipsa
            optio magni nam, omnis beatae nisi itaque similique aperiam cum! Atque, deserunt magnam accusamus temporibus
            maiores, quasi ea aliquam minus cum, beatae voluptatem autem enim fugiat exercitationem tenetur. Doloribus
            sed harum, tenetur quis itaque deleniti ratione provident numquam inventore sint placeat ullam maiores
            corporis aliquam consequuntur, eos voluptas. Id eligendi quidem nam harum libero tempore sit ex aliquam
            distinctio. Esse delectus harum nihil architecto quibusdam libero totam sunt optio eaque voluptatum,
            cupiditate nisi eligendi magnam explicabo dolorum recusandae consequuntur error? Corporis placeat
            necessitatibus dolores maxime veritatis accusantium quae ex tenetur alias laudantium, odit sapiente cumque
            vitae, reprehenderit ad quasi atque? Neque eveniet magni asperiores veritatis tempora beatae delectus culpa
            dolore, deleniti mollitia enim. Voluptates labore dolor omnis neque ab ipsam, exercitationem doloribus et
            nam, deleniti, aliquam laborum debitis hic. Molestiae perferendis sunt at eum earum dolor enim cupiditate
            libero voluptate possimus. Vero esse possimus debitis delectus, exercitationem atque minus eius doloremque,
            voluptate amet cum!
        </div>
    </div>
    <hr>
    <div class="box3">
        <div class="itemx itemx1">
            justify-self: right;<br>
            display: flex;<br>
            align-items: center;<br>
        </div>
        <div class="itemx itemx2">2</div>
        <div class="itemx itemx3">
            justify-self: left;<br>
            display: flex;<br>
            align-items: flex-end;<br>
        </div>
    </div>
    <style>
        .box {
            font-size: 20px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
            background: rgb(75, 52, 52);
            width: 1200px;
            /* 宽高比 */
            aspect-ratio: 2/1;
        }

        .box .item {
            width: 200px;
            height: 200px;
            background: #ccc;
        }

        .box .item1 {
            background: rebeccapurple;
            justify-self: center;

            display: flex;
            align-items: center;
        }

        .box .item2 {
            background: rgb(60, 169, 32);
            justify-self: end;

            display: flex;
            align-items: flex-end;
        }

        .box .item3 {
            background: rgb(60, 169, 32);
            justify-self: start;

            display: flex;
            align-items: flex-start;
        }

        .box .item1 .item11 {
            width: 100px;
            height: 100px;
            background: red;


            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
        }

        .box2 {
            background: rgb(116, 26, 26);
            color: #fff;
            display: flex;
            flex-direction: row;
            gap: 10px;
            --c: rgba(34, 10, 113, 0.4);
            padding: 10px;

            /* height: 500px; */
            justify-self: stretch;
        }

        .left {
            padding: 10px;
            background: var(--c);
            width: 200px;
            /* height: fit-content; */
        }

        .right {
            padding: 10px;
            background: var(--c);
            flex: 1;
            height: fit-content;
        }

        .box3 {
            height: 200px;
            background: rgb(110, 9, 9);
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 10px;
            padding: 10px;
        }

        .box3 .itemx {
            flex: 1;
            background: rgb(7, 4, 52);
            color: #f1f1f1;
        }

        .box3 .itemx1 {
            justify-self: right;

            display: flex;
            align-items: center;
        }

        .box3 .itemx2 {
            /* justify-self: center; */

            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }

        .box3 .itemx3 {
            justify-self: left;

            display: flex;
            align-items: flex-end;
        }
    </style>
</body>

</html>